<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<!--遍历属组、单个元素的增删改操作-->
		<div id="app">
			<ol>
				<li v-for="(p,index) in persions" :key="index">
					{{p.name}} --- {{p.age}}
					<button @click="deleteP(index)">删除</button>
					<button @click="updateP(index,{'name':'ljm1','age':22})">更新</button>
					<button @click="addP(index,{'name':'ljm2','age':23})">新增</button>
				</li>
			</ol>
			<ul>
				<li v-for="(value,key,index) in persions[1]" :key="index">
					{{index}} --- {{value}} --- {{key}}
				</li>
			</ul>
		</div>
		<hr>
		<!--属组的搜索、排序操作-->
		<div id="demo">
			<input type="text" v-model="searchName"/>
			<ol>
				<li v-for="(p,index) in newPersions"  :key="index">
					{{index}} --- {{p.name}} --- {{p.age}}
				</li>
			</ol>
			<button @click="setOrderType(1)">升序</button><br />
			<button @click="setOrderType(2)">降序</button><br />
			<button @click="setOrderType(0)">原始顺序</button><br />
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		new Vue({
			el:"#demo",
			data:{
				searchName:"",
				//排序字段，0：原始顺序，1：升序，2：降序
				orderType:"0",
				persions:[
					{"name":"john111","age":23},
					{"name":"yohan11","age":21},
					{"name":"tom1111","age":22},
					{"name":"tony111","age":25},
					{"name":"lisa111","age":27},
					{"name":"sishi11","age":26},
					{"name":"salinna","age":24}
				]
			},
			computed:{
				newPersions(){
					//属组过滤不符合条件的数据，组成新的数组
					var newPs = this.persions.filter(p => p.name.indexOf(this.searchName) >= 0)
					if(this.orderType != 0){
						//升序
						if(this.orderType == 1){
							newPs.sort(function(o1,o2){
									return o1.age - o2.age;
							})
						//降序
						}else{
							newPs.sort(function(o1,o2){
									return o2.age - o1.age;
							})
						}
					}
					return newPs;
				}
			},
			methods:{
				setOrderType(orderType){
					this.orderType = orderType
				}
			}
		})
	</script>
	<script type="text/javascript">
		new Vue({
			el: "#app",
			data: {
			persions:[
					{"name":"john111","age":23},
					{"name":"yohan11","age":21},
					{"name":"tom1111","age":22},
					{"name":"tony111","age":25},
					{"name":"lisa111","age":27},
					{"name":"sishi11","age":26},
					{"name":"salinna","age":24}
				]
			},
			methods: {
				deleteP(index) {
					this.persions.splice(index, 1)
				},
				updateP(index, newPersion) {
					this.persions.splice(index, 1, newPersion)
				},
				addP(index, newP) {
					this.persions.splice(index, 0, newP)
				}
			}
		})
	</script>

</html>
